<template>
    <div>
        <el-row>
            <el-button type="primary" @click="dialogFormVisible = true" style="margin-left: 80%;">新增薪资表</el-button>
            <el-button plain @click="open" type="text">删除工资表</el-button>
        </el-row>
        <div style="margin-top: 1rem;margin-left: 42rem;">
            <span>员工姓名 </span>
            <el-input v-model="input" placeholder="请输入员工姓名" style=" width: 10rem;" clearable></el-input>
            <span>部门 </span>
            <el-select v-model="value" clearable placeholder="请选择部门">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <el-button type="primary" icon="el-icon-search" style="width: 5rem;" @click="search()">搜索</el-button>
        </div>
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column fixed prop="employeeID" label="工号" width="120">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="department" label="部门" width="120">
            </el-table-column>
            <el-table-column prop="position" label="岗位" width="120">
            </el-table-column>
            <el-table-column prop="basicSalary" label="基本工资" width="120">
            </el-table-column>
            <el-table-column prop="positionSalary" label="岗位工资" width="120">
            </el-table-column>
            <el-table-column prop="jobSalary" label="职务工资" width="120">
            </el-table-column>
            <el-table-column prop="housingAllowance" label="住房补贴" width="120">
            </el-table-column>
            <el-table-column prop="highTemperatureAllowance" label="高温津贴" width="120">
            </el-table-column>
            <el-table-column prop="transportationAllowance" label="交通补贴" width="120">
            </el-table-column>
            <el-table-column prop="mealAllowance" label="餐补" width="120">
            </el-table-column>
            <el-table-column prop="performanceBonus" label="绩效工资" width="120">
            </el-table-column>
            <el-table-column prop="quarterlyBonus" label="季度奖" width="120">
            </el-table-column>
            <el-table-column prop="fullAttendanceBonus" label="全勤奖" width="120">
            </el-table-column>
            <el-table-column prop="referralBonus" label="推荐奖" width="120">
            </el-table-column>
            <el-table-column prop="salesCommission" label="销售提成" width="120">
            </el-table-column>
            <el-table-column prop="lateDeduction" label="迟到扣款" width="120">
            </el-table-column>
            <el-table-column prop="earlyLeaveDeduction" label="早退扣款" width="120">
            </el-table-column>
            <el-table-column prop="absenceDeduction" label="旷工扣款" width="120">
            </el-table-column>
            <el-table-column prop="leaveDeduction" label="假期扣款" width="120">
            </el-table-column>
            <el-table-column prop="cardMissingDeduction" label="缺卡扣款" width="120">
            </el-table-column>
            <el-table-column prop="totalDeduction" label="综合扣款" width="120">
            </el-table-column>
            <el-table-column prop="calculatedDays" label="计薪天数" width="120">
            </el-table-column>
            <el-table-column prop="actualDays" label="实际计薪天数" width="120">
            </el-table-column>
            <el-table-column prop="grossSalary" label="应发工资" width="120">
            </el-table-column>
            <el-table-column prop="netSalary" label="实发工资" width="120">
            </el-table-column>
            <el-table-column prop="totalAttendanceDeduction" label="考勤扣款合计" width="120">
            </el-table-column>
        </el-table>

        <el-dialog title="新增薪资表" :visible.sync="dialogFormVisible">
            <el-form :model="form" :inline="true">
                <el-form-item label="工号" :label-width="formLabelWidth">
                    <el-input v-model="form.employeeID" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="部门" :label-width="formLabelWidth">
                    <el-select v-model="form.department" placeholder="请选择部门" style="width: 11.8rem">
                    </el-select>
                </el-form-item>
                <el-form-item label="岗位" :label-width="formLabelWidth">
                    <el-input v-model="form.position" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="基本工资" :label-width="formLabelWidth">
                    <el-input v-model="form.basicSalary" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="岗位工资" :label-width="formLabelWidth">
                    <el-input v-model="form.positionSalary" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="职务工资" :label-width="formLabelWidth">
                    <el-input v-model="form.jobSalary" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="住房补贴" :label-width="formLabelWidth">
                    <el-input v-model="form.housingAllowance" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="交通补贴" :label-width="formLabelWidth">
                    <el-input v-model="form.transportationAllowance" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="餐补" :label-width="formLabelWidth">
                    <el-input v-model="form.mealAllowance" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="绩效工资" :label-width="formLabelWidth">
                    <el-input v-model="form.performanceBonus" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="季度奖" :label-width="formLabelWidth">
                    <el-input v-model="form.quarterlyBonus" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="全勤奖" :label-width="formLabelWidth">
                    <el-input v-model="form.fullAttendanceBonus" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="推荐奖" :label-width="formLabelWidth">
                    <el-input v-model="form.referralBonus" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="销售提成" :label-width="formLabelWidth">
                    <el-input v-model="form.salesCommission" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="迟到扣款" :label-width="formLabelWidth">
                    <el-input v-model="form.lateDeduction" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="早退扣款" :label-width="formLabelWidth">
                    <el-input v-model="form.earlyLeaveDeduction" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="旷工扣款" :label-width="formLabelWidth">
                    <el-input v-model="form.absenceDeduction" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="假期扣款" :label-width="formLabelWidth">
                    <el-input v-model="form.leaveDeduction" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="缺卡扣款" :label-width="formLabelWidth">
                    <el-input v-model="form.cardMissingDeduction" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="综合扣款" :label-width="formLabelWidth">
                    <el-input v-model="form.totalDeduction" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="计薪天数" :label-width="formLabelWidth">
                    <el-input v-model="form.calculatedDays" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="实际计薪天数" :label-width="formLabelWidth">
                    <el-input v-model="form.actualDays" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="应发工资" :label-width="formLabelWidth">
                    <el-input v-model="form.grossSalary" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="实发工资" :label-width="formLabelWidth">
                    <el-input v-model="form.netSalary" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="考勤扣款合计" :label-width="formLabelWidth">
                    <el-input v-model="form.totalAttendanceDeduction" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                <el-button @click="dialogFormVisible = false">取 消</el-button>
            </div>
        </el-dialog>

        <div class="block" style="margin-left: 65%; margin-top: 1rem;">
            <span class="demonstration"></span>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[15, 30, 60, 100]" :page-size="100"
                layout="total, sizes, prev, pager, next, jumper" :total="0">
            </el-pagination>
        </div>

    </div>
</template>

<script>
export default {
    methods: {
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        handleClick(row) {
            console.log(row);
        },
        open() {
            this.$confirm('当月工资表删除后，上月工资表将纳入当月工资表中，并且支持修改，确定要删除当月工资表吗？', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //根据name进行搜索搜索
        search() {
            let sou = document.getElementById('seainp').value;
            this.newtable = []
            console.log('搜索功能' + sou)
            this.tableData.forEach(name => {
                if (sou == name.name) {
                    console.log(name.name)
                    // this.newtable = []
                    this.newtable.push(name)
                } else {
                    console.log('未找到')
                }
            });
            console.log(this.newtable)
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
    },
    data() {
        return {
            input: '',
            currentPage: 1,
            options: [{
                value: '选项1',
                label: '研发部'
            }, {
                value: '选项2',
                label: '销售部'
            }, {
                value: '选项3',
                label: '人事部'
            }, {
                value: '选项4',
                label: '财务部'
            }, {
                value: '选项5',
                label: '采购部'
            }],
            value: '',
            tableData: [{
                employeeID: '9527',
                name: '张帅扬',
                department: '上海',
                position: '普陀区',
                basicSalary: '上海市普陀区',
                positionSalary: 200333,
                jobSalary: 100000,
                housingAllowance: 10000,
                transportationAllowance: 10000,
                mealAllowance: 10000,
                performanceBonus: 10000,
                quarterlyBonus: 10000,
                fullAttendanceBonus: 10000,
                referralBonus: 10000,
                salesCommission: 10000,
                lateDeduction: 10000,
                earlyLeaveDeduction: 10000,
                absenceDeduction: 10000,
                leaveDeduction: 10000,
                cardMissingDeduction: 10000,
                totalDeduction: 10000,
                calculatedDays: 10000,
                actualDays: 10000,
                grossSalary: 10000,
                netSalary: 10000,
                totalAttendanceDeduction: 10000
            }],

            dialogFormVisible: false,
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            formLabelWidth: '120px'
        }
    }
}
</script>

<style scoped></style>